<template>
  <div class="contioner">
    <div style="background-color: #fff; height: 100%">
      <a-tabs   :lazy-load="true" type="card" justify :default-active-key="activeNme">
        
        <a-tab-pane title="原料问题开剪次布记录" key="1" v-if="permissionStore.hasPermisson('bbcx.ylwtkjcbjl')">
          <pageTabelLayout>
        <template #pageHeader>
          <div class="my-divisders">
            <a-divider orientation="center">
              <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
              <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
            </a-divider>
          </div>
          
              <div class="my-tool-bar">
                <div class="search-form isheader" v-show="headerShow" style="padding-top: 15px">
                  <a-form size="small" :model="query" layout="inline">
                    <a-form-item label="检验单号" prop="beginDate" v-if="permissionStore.hasPermisson('ylwtkjcbjl.cx')">
                      <a-input v-model="query.billNumber" :style="{ width: '180px' }" class="bacClass" />
                    </a-form-item>
                    <a-form-item label="织布单号" prop="beginDate" v-if="permissionStore.hasPermisson('ylwtkjcbjl.cx')">
                      <a-input v-model="query.planOrderCode" :style="{ width: '180px' }" class="bacClass" />
                    </a-form-item>
                    <a-form-item label="日期" prop="beginDate" v-if="permissionStore.hasPermisson('ylwtkjcbjl.cx')">
                      <a-date-picker popup-container="html" v-model="query.startDate" :style="{ width: '180px' }"
                        placeholder="选择开始时间" class="bacClass" />
                    </a-form-item>

                    <a-form-item label="至" prop="endDate">
                      <a-date-picker popup-container="html" v-model="query.endDate" :style="{ width: '180px' }"
                        placeholder="选择结束时间" class="bacClass" />
                    </a-form-item>
                  </a-form>
                  <div class="my-tool-bar">
                    <Toolbar :items="pageData.btnList" @select="getList" @export="exportExcel"> </Toolbar>
                  </div>
                </div>
              </div>
            </template>

            <template #pageTabel>
              <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                :suppressDragLeaveHidesColumns="true" v-loading="loadingElplus" rowSelection="multiple"
                @grid-ready="gridReady" style="height: calc(100% - 40px);" @columnVisible="onColumnVisible"
                :defaultColDef="defaultColDef" class="ag-theme-alpine" :rowData="pageData.dataList" :columnDefs="tc"
                :localeText="localeText1" @columnResized="onColumnResized" @columnMoved="onColumnMoved"></AgGridVuesCopys>
              <paginationCopys :total="query.total" show-total show-jumper show-page-size @change="PageSize"
                @page-size-change="changeSize" style="justify-content: center" :page-size="query.size"
                :current="query.page" :page-size-options="pagingList1" />
            </template>
          </pageTabelLayout>
        </a-tab-pane>
        <a-tab-pane title="值机工值机质量" key="2" v-if="permissionStore.hasPermisson('bbcx.zjgzjzl')">
          <checkInQuality></checkInQuality>
        </a-tab-pane>
        <a-tab-pane title="个人和汇总统计报表" key="3">
          <personAndSummary></personAndSummary>
        </a-tab-pane>
        <a-tab-pane title="检查项按厂区统计报表" key="4">
          <itemPlantCount></itemPlantCount>
        </a-tab-pane>
        <a-tab-pane title="检查名称按厂区统计报表" key="5">
          <namePlantCount></namePlantCount>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
//表格


//表格数据处理
import { useTableColumn } from '@/hooks/table'
import { localeText } from '@/api/aggridZw'

//分页列表
import { pagingList } from '@/api/paging'

// 引入element提示
import { ElMessage } from 'element-plus'

//引入封装post
import { post } from '@/api/http'

//引入导出方法
import { EXPORTEXEL, EXELTABLE } from '@/utils/exportEXCEL'
import usePermission from '@/store/modules/permission'
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
interface Pagein {
  btnList: any
  dataList: any
  tc: any
}
const headerShow = ref(true)

// 跟请求参数无关的放这里
let pageData = reactive<Pagein>({
  btnList: [], // 按钮列表
  dataList: [],
  tc: [],
})
//原料问题开剪次布记录
const permissionStore = usePermission()
if (permissionStore.hasPermisson('ylwtkjcbjl.cx')) {
  pageData.btnList.push('查询')
}
if (permissionStore.hasPermisson('ylwtkjcbjl.dc')) {
  pageData.btnList.push('导出')
}
interface Querin {
  total: any
  page: any
  size: any
  planOrderCode: Number | String
  billNumber: Number | String
  startDate: Number | String
  endDate: Number | String
}

//getlist初始化接口参数
let query = reactive<Querin>({
  total: 0,
  page: 1,
  size: 10,
  planOrderCode: '',
  startDate: '',
  endDate: '',
  billNumber: ''
})

// 分页数组条数
const pagingList1: any = ref(pagingList)

//tabs选中的值
let activeNme = ref<string>('1')

// 表格准备事件
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
  colState.value = params.columnApi
}

//表格配置
const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
  //flex: 1
}

// 表格列
let tableColumns = useTableColumn([
  {
    title: '公司',
    key: 'firm',
    dataIndex: 'firm',
    width: 150,
  },
  {
    title: '检验单号',
    key: 'billNumber',
    dataIndex: 'billNumber',
    width: 150,
  },

  {
    title: '织布单号',
    key: 'planOrderCode',
    dataIndex: 'planOrderCode',
    width: 150,
  },
  {
    title: '坯布编号',
    key: 'greigeCode',
    dataIndex: 'greigeCode',
    width: 150,
  },
  {
    title: '问题记',
    key: 'cutState',
    dataIndex: 'cutState',
    width: 150,
  },
  {
    title: '坯布名称',
    key: 'greigeName',
    dataIndex: 'greigeName',
    width: 150,
  },
  {
    title: '机台号',
    key: 'machine',
    dataIndex: 'machine',
    width: 150,
  },
  {
    title: '匹号',
    key: 'horses',
    dataIndex: 'horses',
    width: 150,
  },
  {
    title: '原料信息',
    key: 'codes',
    dataIndex: 'codes',
    width: 150,
  },
  {
    title: '纱批',
    key: 'batchs',
    dataIndex: 'batchs',
    width: 200,
  },
  {
    title: '扣米数',
    key: 'priceNum',
    dataIndex: 'priceNum',
    width: 200,
  },
  {
    title: '次布数量',
    key: 'timeClothShareWeight',
    dataIndex: 'timeClothShareWeight',
    width: 200,
  },
  {
    title: '备注',
    key: 'remark',
    dataIndex: 'remark',
    width: 200,
  },
  {
    title: '检验日期',
    key: 'billDate',
    dataIndex: 'billDate',
    width: 200,
  },
])
let tc: any[] = tableColumns.map((o) => {
  let obj = {
    headerName: o.title,
    field: o.key,
    tooltipField: o.key,
  }
  if (o.dataIndex === 'cutState') {
    obj['cellRenderer'] = {
      template: `<a-space>
                        <el-tag  type="success" v-if="a==1" >原料问题开剪</el-tag>
                        <el-tag  type="warning" v-if="a==2" >调机员调机</el-tag>
                  </a-space>`,
      setup(props: any) {
        return {
          a: props.params.data.cutState,
        }
      },
    }
  }
  return obj
})
const localeText1: any = ref(localeText)
let a = [
  {
    showRowGroup: 'hide_def',
    headerName: '',
    checkboxSelection: true,
    headerCheckboxSelection: true,
    pinned: 'left',
    width: 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: 'left',
  },
]
tc = a.concat(tc)

// 分页事件
const PageSize = (val: any) => {
  query.page = val
  getList()
}

const changeSize = (val: any) => {
  query.size = val
  getList()
}
// loding.....
let loadingElplus = ref<boolean>(false)

// 转换日期格式
let rTime = (date: any) => {
  var json_date = new Date(date).toJSON()
  return new Date(Number(new Date(json_date)) + 8 * 3600 * 1000)
    .toISOString()
    .replace(/T/g, ' ')
    .replace(/\.[\d]{3}Z/, '')
}
//获取数据
const getList = async () => {
  if (query.endDate) {
    query.endDate = rTime(query.endDate)
  }
  if (query.startDate) {
    query.startDate = rTime(query.startDate)
  }
  try {
    loadingElplus.value = true
    updateGridState01()
    let { code, data, message } = await post({
      url: 'qms/scannedGreyCloth/getPageByCut',
      data: query,
    })
    if (code == 200) {
      pageData.dataList = data.list
      query.total = data.total
      //   ElMessage({
      //     type: 'success',
      //     message: '创建成功',
      //   })
      loadingElplus.value = false
      return
    }
    ElMessage.error(message)
  } finally {
    loadingElplus.value = false
  }
}
// 导出
let exportExcel = () => {
  //表头中文名
  //   const titleArr = [
  //     '公司',
  //     '检验单号',
  //     '计划单号',
  //     '坯布编号',
  //     '坯布名称',
  //     '机台号',
  //     '匹号',
  //     '原料信息',
  //     '纱批',
  //     '扣米数',
  //     '次布数量',
  //     '备注',
  //     '检验日期',
  //   ]
  //   let colunm = [
  //     'projectCode',
  //     'billNumber',
  //     'planOrderCode',
  //     'greigeCode',
  //     'greigeName',
  //     'machine',
  //     'horses',
  //     'codes',
  //     'batchs',
  //     'priceNum',
  //     'timeClothShareWeight',
  //     'remark',
  //     'billDate',
  //   ]

  EXELTABLE(tableColumns, pageData.dataList, '原料问题开剪次布记录')
  //   TableToExcel()
  //   //   把数组转换成对象对应colunm的值
  //   let data = pageData.dataList.reduce((pre: any, cur: any, index: any) => {
  //     let predata = {}
  //     colunm.map((item: string) => {
  //       predata[item] = cur[item]
  //     })
  //     return (pre[index] = predata)
  //   }, {})
  //   EXPORTEXEL({ data }, '原料问题开剪次布记录', titleArr, '1')
}

//初始化
onMounted(() => {
  getList()
})

const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('reportQuery', gridOption, colState, tc)
const onColumnMoved = () => {
  saveGridState01()
}
const onColumnResized = () => {
  saveGridState01()
}
const onColumnVisible = () => {
  saveGridState01()
}
</script>
<script lang="ts">
export default defineComponent({
  name: 'reportQuery',
})
</script>
<style scoped>
.contioner {
  height: 100%;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
</style>
  